<template>
    <div class="warpper" ref="details">
        <div class="head-bg">
            <img class="bg-img" src="../../assets/ctiy/bg.png" alt="">
            <div class="container">
                <div class="head-title">
                    <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item>城市合作</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
            </div>
        </div>
        
        <div class="container">
            <div class="height70"></div>
            <div class="brief-warpper">
                <div class="brief-img">
                    <img src="../../assets/ctiy/ipone.png" alt="">
                </div>
                <div class="brief-desc">
                    <div class="brief-title">产品简介</div>
                    <p>家护帮平台是由陕西家护帮网络科技有限公司开发的一种手机应用平台。</p>
                    <p>
                        用户可以随时随地打开手机，查找附近的家庭保洁小时工。用户可以服务
                        员登记的经验、价格、距离、籍贯等信息，选择适合自己的保洁阿姨，
                        并与阿姨直接取得联系。阿姨帮的保洁阿姨拥有多年家政或保洁行业
                        的经验，可以为用户提供高质量的家庭日常保洁服务。
                    </p>
                    <div class="function">
                        <span>预约雇工</span>
                        <span>系统派单</span>
                        <span>投诉反馈</span>
                    </div>
                </div>
            </div>

             <div class="height70"></div>
             <div class="icon">
                 <div v-for="item in [1,2,3,4,5,6]" :key="item"></div>
             </div>
            <div class="height70"></div>
            <div class="project">
                <img class="project-bg" src="../../assets/ctiy/tu.png" alt="">
                <div class="title">项目情况</div>
                <div class="desc">
                    投资2.2亿元,其中投资亿元以上项目1个，总投资1.8亿元，20xx年预计完成投资1.2亿元；
                    新邱区共3个项目，总投资2.1亿元，20xx年预计完成投资8100万元；其中投资亿元以上项目1个，
                    总投资1亿元，20xx年预计完成投资4000万元；清河门区共2个，全部为投资亿元以上项目，
                    总投资2.8亿元，20xx年预计完成投资2.7亿元；高新产业开发区共3个项目，
                    全部为投资亿元以上项目，总投资3.6亿元，20xx年预计完成投资1.6亿元；
                </div>
            </div>

            <div class="project-dynamic">
                <div class="img-warpper"><img src="../../assets/ctiy/icon3.png" alt=""></div>
                <div class="desc-warpper">
                    <div class="desc-title">
                        项目最新动态
                    </div>
                    <div class="desc-info">
                        投资2.2亿元,其中投资亿元以上项目1个，总投资1.8亿元，20xx年预计完成投资1.2亿元；
                        新邱区共3个项目，总投资2.1亿元，20xx年预计完成投资8100万元；其中
                    </div>
                </div>
            </div>

            <div class="icon" style=" justify-content:center;">
                 <div v-for="item in [1,2,3,4,5,6]" :key="item"></div>
            </div>

            <div class="advantage-warpper">
                <div class="advantage-title">项目优势</div>

                <div class="advantage-item">
                    <img class="itme-icon" src="../../assets/ctiy/icon4.png" alt="">
                    <div class="adcantage-desc" style="align-items: flex-end;">
                        <img class="desc-img" src="../../assets/ctiy/icon.png" alt="">
                        <div class="desc-title">技术优势</div>
                        <p class="desc-info">
                            加盟者可以得到系统的管理培训和指导。如果一家新企业要独自摸索一套可行的管理方法，
                            往往需要较长的时间。如果投资者加盟家政公司，可以立即得到总部的管理技巧、经营
                            诀窍和业务知识方面的培训。这些经验是加盟公司经过多年实践，已被证明是行之有效的、
                            规范化的管理系统，加盟者照搬这些标准化的经营管理方式，极易获得成功。
                        </p>
                    </div>
                </div>
                <div class="height70"></div>
                <div class="advantage-item" style="justify-content: flex-end;">
                    <img class="itme-icon" src="../../assets/ctiy/icon1.png" alt="">
                    <div class="adcantage-desc" style="align-items: flex-start;">
                        <img class="desc-img" src="../../assets/ctiy/icon.png" alt="">
                        <div class="desc-title">品牌优势</div>
                        <p class="desc-info">
                            加盟者可以得到系统的管理培训和指导。如果一家新企业要独自摸索一套可行的管理方法，
                            往往需要较长的时间。如果投资者加盟家政公司，可以立即得到总部的管理技巧、经营
                            诀窍和业务知识方面的培训。这些经验是加盟公司经过多年实践，已被证明是行之有效的、
                            规范化的管理系统，加盟者照搬这些标准化的经营管理方式，极易获得成功。
                        </p>
                    </div>
                </div>
                <div class="height70"></div>
                <div class="advantage-item">
                    <img class="itme-icon" src="../../assets/ctiy/icon4.png" alt="">
                    <div class="adcantage-desc" style="align-items: flex-end;">
                        <img class="desc-img" src="../../assets/ctiy/icon.png" alt="">
                        <div class="desc-title">网络优势</div>
                        <p class="desc-info">
                            加盟者可以得到系统的管理培训和指导。如果一家新企业要独自摸索一套可行的管理方法，
                            往往需要较长的时间。如果投资者加盟家政公司，可以立即得到总部的管理技巧、经营
                            诀窍和业务知识方面的培训。这些经验是加盟公司经过多年实践，已被证明是行之有效的、
                            规范化的管理系统，加盟者照搬这些标准化的经营管理方式，极易获得成功。
                        </p>
                    </div>
                </div>
            </div>
            <div class="height70"></div>
            <div class="icon" style=" justify-content:center;">
                 <div v-for="item in [1,2,3,4,5,6]" :key="item"></div>
            </div>

            <div class="profit-warppeer">
                <div class="profit-title">项目优势</div>
                <div class="height70"></div>
                <div class="from-title">营收计算</div>
                <div class="from-warpper">
                    <div class="from-item" v-for="item in [256,220,400,340,259]" :key="item" :style="'height:'+ item +'px' " >
                        {{item}}
                    </div>
                </div>
                <div class="height70"></div>
                <div class="from-title">合伙人投入</div>
                <div class="from-title">合伙人产出</div>
                <div class="from-title">收益周期</div>
            </div>
            <div class="height70"></div>
            <div class="icon" style=" justify-content:center;">
                 <div v-for="item in [1,2,3,4,5,6]" :key="item"></div>
            </div>

            <div class="city-warpper">
                <div class="city-title">可合作城市</div>
                <div class="city-desc">
                    <div class="desc-wrapper">
                        <div class="dsec-title">可合作城市</div>
                        <div class="desc-city">陕西 、北京 、山西 、重庆</div>
                        <div class="desc-info">
                            2013年8月 <br/>
                            阿姨帮启用域名ayibang.com上线，阿姨帮APP应运而生。<br/>
                            2013年8月<br/>
                            第一座城市，阿姨帮北京站开通。<br/>
                            2013年12月 <br/>
                            获CCTV《影响力对话》家政行业合作伙伴
                        </div>
                    </div>
                    <img src="../../assets/ctiy/map.png" alt="">
                </div>

                <div class="height70"></div>
                <div class="icon">
                    <div v-for="item in [1,2,3,4,5,6]" :key="item"></div>
                </div>
                <div class="height70"></div>
                
                <div class="business-warpper">
                    <div>
                            <div class="desc">
                                <p>招商负责人</p>
                                <p>李大力</p>
                            </div> 
                             <div>
                                <p>个人联系方式</p>
                                <p>12345678911</p>
                            </div> 
                    </div>
                    <div>
                             <div class="desc">
                                <p>公司联系方式</p>
                                <p>4000 8888 8888</p>
                            </div> 
                             <div>
                                <p>公司邮箱</p>
                                <p>hrjihbang@qq.com</p>
                            </div> 
                    </div>
                </div>

                <div class="code-warpper">
                    <div class="code-item">
                        <img src="../../assets/ctiy/2er.png" alt="">
                        <p>公众号</p>
                    </div>
                    <div class="code-item">
                        <img src="../../assets/ctiy/2er.png" alt="">
                        <p>下载二维码</p>
                    </div>
                </div>
                <div class="height70"></div>
            </div>


        </div>

    </div>
</template>

<script>
export default {
  name: 'City',
  mounted() {
        this.$refs.details.style.minHeight = window.innerHeight - 267 + "px";
    }
}
</script>

<style lang="stylus" scoped>
    
    .warpper
        margin-top: 67px
        box-sizing border-box
        .icon
            display flex
            div
                width 6px
                height 6px
                background-color #5287ff
                border-radius 50%
                margin-right 3px
        .head-bg
            height 221px
            position relative
            .bg-img
                position absolute
                top 0
                left 0
                right 0
                margin auto
                width 100%
                z-index -1
        .brief-warpper
            display flex
            align-items flex-start
            .brief-img
                width 589px
                height 500px
                text-align center
                img 
                    height 500px
            .brief-desc
                flex 1
                > p
                    font-size 20px
                    line-height 35px
                    margin-bottom 40px
                    color #333
                .brief-title
                    font-size 30px
                    text-align center
                    margin-bottom 40px
                    color #181818
                .function
                    margin-top 10px
                    cursor pointer
                    font-size 30px
                    color #181818
                    display flex
                    flex-wrap wrap
                    span 
                        width 33.333%;
                        &:hover
                            color #5287ff
        .project
            width 1200px
            height 433px
            border-radius 20px
            overflow hidden
            position relative
            margin-bottom 40px
            color #fff
            .project-bg
                width 100%
                height 100%
                position absolute
                z-index -1
                top 0
                left 0
                right 0
                bottom 0
            .title
                font-size 30px
                width 462px
                height 77px
                line-height 77px
                text-align center
                margin auto
                border-bottom 1px solid #fff
            .desc
                margin 0 170px
                margin-top 40px
                font-size 22px
                line-height 36px
        .project-dynamic
            display flex 
            margin-bottom 30px
            .img-warpper
                width 573px
                img 
                    width 100%
            .desc-warpper
                flex 1
                margin-left 20px
                .desc-title
                    font-size 30px
                    color #739eff
                    text-align center
                .desc-info
                    margin-top 40px
                    font-size 20px
                    color #242323
                    line-height 36px
        .advantage-warpper
            margin-top 40px    
            .advantage-title
                text-align center
                font-size 29px
                margin-bottom 40px
                color #242323
            .advantage-item
                display flex
                position relative
                margin-bottom 40px
                .itme-icon
                    position absolute
                    top 50px
                    left 0
                    right 0
                    margin auto
                    width 132px
                    height 132px
                .adcantage-desc
                    width 443px
                    display flex
                    flex-direction column
                    .desc-img
                        width 24px
                        height 28px
                        margin-bottom 20px
                    .desc-title
                        font-size 29px
                        color #242323
                        margin-bottom 20px
                    .desc-info
                        font-size 20px
                        line-height 35px
                        color #666
                        overflow  hidden
                        text-overflow ellipsis
                        display -webkit-box
                        -webkit-line-clamp 4
                        -webkit-box-orient vertical
        .profit-warppeer
            margin-top 40px
            .profit-title
                text-align center
                font-size 29px
                margin-bottom 40px
                color #242323
            .from-title
                font-size 30px
                color #242323
                margin-bottom 10px
            .from-warpper
                margin-top 30px
                display flex 
                align-items flex-end
                .from-item
                    width 207px
                    margin-right 50px
                    box-shadow 0 0 0 1px #bfbfbf
                    border-top 28px solid #5287ff
                    display flex
                    justify-content center
                    align-items flex-end
                    font-size 81px
                    color #242323
                    padding-bottom 20px
                    box-sizing border-box
        .city-warpper
            margin-top 40px
            .city-title
                text-align center
                font-size 29px
                margin-bottom 40px
                color #242323
            .city-desc
                display flex
                justify-content space-between
                align-items flex-start
                .desc-wrapper
                    width 360px
                    .dsec-title
                        font-size 34px
                        color #242323
                        margin-bottom 20px
                    .desc-city
                        font-size 30px
                        color #686767
                        margin-bottom 20px
                    .desc-info
                        font-size 26px
                        color #6d6d6d
                        line-height 37px
            .business-warpper
                margin auto
                position relative
                z-index 2
                width 1200px
                height 361px
                background-color #6ba0f7
                box-shadow 0px 11px 17px 0px rgba(107, 160, 247, 0.48)
                border-radius 10px
                display flex
                align-items center
                justify-content space-between
                box-sizing border-box
                padding 0 120px
                font-size 30px
                color #fefefe
                p
                    margin 20px 0
                .desc
                    margin-bottom 60px
            .code-warpper
                position relative
                z-index 1
                margin auto
                margin-top -10px
                width 1200px
                height 460px
                display flex 
                justify-content space-between
                align-items flex-end
                box-sizing border-box
                padding 0 130px
                background-color #ededed
                .code-item
                    width 247px
                    text-align center
                    margin-bottom 40px
                    img
                        width 247px
                        height 247px
                        margin-bottom 20px
                    p   
                        color #6ba0f7
                        font-size 30px
</style>
